<template>
	<view class='abb'>
		<view class="full" @click="closeFull"></view>
		
		<view class="login-out">
		 <!-- <view
		    ><b>{{ title }}</b></view
		  > -->
		  <view @click="showSelect('profession')">专业：<text class="text-load">{{ form.profession }}</text></view>
		  <view @click="showORG">所在机构：<text class="text-load">{{ form.org }}</text></view>
		  <view @click="showSelect('line')">线路：<text class="text-load">{{ form.line }}</text></view>
		  <view  @click="OnStationClick">所在地点：<text class="text-load">{{ form.station }}</text></view>
		  <view @click="typeClick">器材类型：<text class="text-load">{{ form.type }}</text></view>
		  <u-radio-group
		    v-model="form.checklabel"
		    style="height: 50px; width: 100%"
		    placement="row"
		  >
		    <text
		      style="display: inline-block; line-height: 50px; margin-right: 10px"
		      >是否已关联标签:</text
		    >
		    <u-radio :name="1" :disabled="false">已关联</u-radio>
		    <u-radio :name="2" :disabled="false">未关联</u-radio>
		  </u-radio-group>
		  
		  
		<u-select
		  v-model="show_picker"
		  :list="columns"
		  label-name="text"
		  @confirm="onConfirm"
		  @cancel="onCancel"
		></u-select>
		
		<ljs-treeChoose
		  :data="org_options"
		  @getChooseValue="orgchange"
		  @close="orgcancle"
		  v-if="show.orgShow"
		/>
		<ljs-treeChoose
		  :data="type_options"
		  @getChooseValue="typechange"
		  @close="typecancle"
		  v-if="show.typeShow"
		/>
		  <view class="btn"
		    ><button class="cancel-btn" @click="clear"><b>重置</b></button
		    ><button class="default-btn fr" @click="ok"><b>确定</b></button></view
		  >
		</view>
	<!-- 	<view class="sear" style="z-index:12">
		  <u-cell-group style="padding: 0 0 0 15px;">
		    <u-cell-item
		      title="专业"
		      :value="form.profession == '' ? '请选择' : form.profession"
		      @click="
		        show_picker = true;
		        columns = profession_options;
		      "
		    ></u-cell-item>
		    <u-cell-item
		      title="所在机构"
		      :value="form.org == '' ? '请选择' : form.org"
		      @click="showORG"
		    ></u-cell-item>
		    <u-cell-item
		      title="线路"
		      :value="form.line == '' ? '请选择' : form.line"
		      @click="
		        show_picker = true;
		        columns = line_options;
		      "
		    ></u-cell-item>
		
		    <u-cell-item
		      title="所在地点"
		      :value="form.station == '' ? '请选择' : form.station"
		      @click="OnStationClick"
		    ></u-cell-item>
		    <u-cell-item
		      title="器材类型"
		      :value="form.type == '' ? '请选择' : form.type"
		      @click="typeClick"
		    ></u-cell-item>
		    <u-radio-group
		      v-model="form.checklabel"
		      style="height: 50px; width: 100%"
		      placement="row"
		    >
		      <text
		        style="display: inline-block; line-height: 50px; margin-right: 13%"
		        >是否已关联标签:</text
		      >
		      <u-radio :name="1" :disabled="false">已关联</u-radio>
		      <u-radio :name="2" :disabled="false">未关联</u-radio>
		    </u-radio-group>
		   
		      <view style="display: flex; margin: 0 10px 0 0">
		        <button class="default-btns" @click=" ok">确定</button>
		        <button class="default-btns s1" @click="clear">清空</button>
		      </view>
		  </u-cell-group>
		
		</view> -->
		
		<!-- <view class="full" v-show="show_picker"></view> -->
		
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import { PMS_DICT_CONTROLLER } from "../../api/pms";
	import { TYPECONTROLLER } from "../../api/eqt";
	export default {
		name:"materialSearch",
		
		computed: {
		  ...mapState(["workProfession", "lineTree", "reeByOrgnum"]),
		},
		data() {
			return {
				typeTemp: [],
				show_picker:false,
				columns: [],
				show: {
				  orgShow: false,
				  typeShow: false,
				},
				org_options: [],
				profession_options: [],
				line_options: [],
				type_options: [],
				station_options: [],
				form: {
				  page: 1, //页数
				  orgId: "", //机构id
				  lineId: "", //线路id
				  stationId: "", //车站id
				  equTypeId: "", //器材类型id
				  profession: "",
				  line: "",
				  org: "",
				  station: "",
				  type: "",
				  checklabel: 1,
				},
			};
		},
		created() {
		  this.initTypelist();
		
		  this.line_options = this.lineTree.map((item) => {
		    return {
		      value: item.idK,
		      text: item.name,
		      extra: {
		        type: "line",
		      },
		    };
		  });
		  this.profession_options = this.workProfession.map((i) => {
		    return {
		      value: i.value,
		      text: i.value,
		      extra: {
		        type: "profession",
		      },
		    };
		  });
		},
		methods: {
			showSelect(val){
				this.show_picker=true;
				if(val=='profession'){
					this.columns = this.profession_options;
				}
				if(val=='line'){
					this.columns = this.line_options;
				}
			},
			closeFull(){
				this.$emit("close");
			},
			 ok() {
				this.form.page = 1;
				let obj = {
				  ...this.form,
				};
				this.$emit("closeMaterialSearch", obj);
			  // this.list = [];
			  // this.flog = true;
			  // this.form.page = 1;
			  // this.initList();
			},
			OnStationClick() {
			  if (this.form.line) {
			    this.show_picker = true;
			    this.columns = this.station_options;
			  } else {
			    uni.showToast({ title: "请选择线路~", type: "warning", icon: "none" });
			  }
			},
			typeClick() {
			  let self = this;
			  this.show.typeShow = true;
			  self.type_options = self.typeTemp.map((item) => self.mapTree1(item));
			},
			mapTree1(item) {
			  let has = Array.isArray(item.children) && item.children.length > 0;
			  return {
			    id: item.id,
			    label: item.text,
			    openTag: false,
			    choose: false,
			    children: has ? item.children.map((i) => this.mapTree1(i)) : [],
			  };
			},
			showORG() {
			  let self = this;
			  this.show.orgShow = true;
			  self.org_options = self.reeByOrgnum.map((org) => self.mapTree(org));
			},
			mapTree(org) {
			  const haveChildren =
			    Array.isArray(org.children) && org.children.length > 0;
			  return {
			    id: org.id,
			    label: org.text,
			    openTag: false,
			    choose: false,
			    children: haveChildren ? org.children.map((i) => this.mapTree(i)) : [],
			  };
			},
			
			orgchange(a, items) {
			  this.form.org = items[items.length - 1].label;
			  this.form.orgId = items[items.length - 1].id;
			  setTimeout(() => {
			    this.orgcancle();
			  }, 500);
			},
			typechange(a, items) {
			  this.form.type = items[items.length - 1].label;
			  this.form.equTypeId = items[items.length - 1].id;
			  setTimeout(() => {
			    this.typecancle();
			  }, 500);
			},
			orgcancle() {
			  this.show.orgShow = false;
			},
			typecancle() {
			  this.show.typeShow = false;
			},
			clear() {
			  this.form = {
			    page: 1, //页数
			    orgId: "", //机构id
			    lineId: "", //线路id
			    stationId: "", //车站id
			    equTypeId: "", //器材类型id
			    profession: "",
			    line: "",
			    org: "",
			    station: "",
			    type: "",
			    checklabel: 1,
			  };
			  this.$emit("closeMaterialSearch", this.form);
			},
			initTypelist() {
			  this.fetch(
			    "GET",
			    this.$store.state.baseUrl + TYPECONTROLLER.EQUTYPETREE,
			    {
			      vtype: "2Q",
			    },
			    true
			  ).then((res) => {
			    if (res && res.data && res.data.length > 0) {
			      this.typeTemp = res.data;
			    } else {
			      this.typeTemp = [];
			    }
			  });
			},
			getStation(id) {
			  if (id) {
			    this.fetch(
			      "get",
			      this.$store.state.baseUrl + PMS_DICT_CONTROLLER.GET_NAME_BY_LINEID,
			      { lineId: id }
			    ).then((res) => {
			      if (res && res.data && res.data.length > 0) {
			        this.station_options = res?.data.map((i) => {
			          return {
			            value: i.code,
			            text: i.name,
			            extra: {
			              type: "station",
			            },
			          };
			        });
			      } else {
			        this.station_options = [];
			      }
			    });
			  } else {
			    this.station_options = [];
			  }
			},
			onConfirm(value) {
			  if (value[0].extra.type == "line") {
			    this.form.line = value[0].label;
			    this.form.lineId = value[0].value;
			    this.getStation(value[0].value);
			  } else if (value[0].extra.type == "profession") {
			    this.form.profession = value[0].label;
			  } else if (value[0].extra.type == "station") {
			    this.form.station = value[0].label;
			    this.form.stationId = value[0].value;
			  }
			
			  this.onCancel();
			},
			onCancel() {
			  this.show_picker = false;
			},
		},
		
		
		}
</script>

<style >
	.abb{
		transition: width 5s;
	}
	.text-load {
	  padding: 0 20px;
	  height: 45px;
	  line-height: 45px;
	}
.login-out {
  padding: 26px 0 0 26px;
}
.default-btn,
.cancel-btn {
  width: 40%;
  display: inline-block;
}
</style>